<template>
	<div class="edit">
		<a-form :model="formState" v-bind="layout" name="nest-messages" :validate-messages="validateMessages"
			@finish="onFinish">
			<a-form-item :name="['user', 'name']" label="标题" :rules="[{ required: true }]">
				<a-input v-model:value="formState.user.name" />

			</a-form-item>
			<!-- <a-form-item :name="['user', 'age']" label="图片" :rules="[{ type: 'number', min: 0, max: 99 }]">
				<a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card" class="avatar-uploader"
					:show-upload-list="false" :action="baseUrl + '/api/upload'" :before-upload="beforeUpload"
					@change="handleChange">
					<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
					<div v-else>
						<loading-outlined v-if="loading"></loading-outlined>
						<plus-outlined v-else></plus-outlined>
						<div class="ant-upload-text">上传</div>
					</div>
				</a-upload>
			</a-form-item> -->

			<a-form-item :name="['user', 'intro']" label="介绍">
				<a-input v-model:value="formState.user.intro" />

			</a-form-item>
			<a-form-item :name="['user', 'category']" label="分类">
				<a-select ref="select" v-model:value="formState.user.category" style="width: 120px">
					<a-select-option v-for="(item, index) in formState.category1" :key="index" :value="item.id">
						{{ item.name }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :name="['user', 'recommend']" label="首页推荐">
				<a-switch v-model:checked="formState.user.recommend" />
			</a-form-item>
			<a-form-item :name="['user', 'status']" label="状态">
				<a-switch v-model:checked="formState.user.status" />
			</a-form-item>
			<a-form-item :name="['user', 'pic']" label="图片地址">
				<a-input v-model:value="formState.user.pic" />
			</a-form-item>
			<a-form-item :name="['user', 'content']" label="内容">
				<a-input v-model:value="formState.user.content" />
			</a-form-item>
			<a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 2 }">
				<a-button type="primary" html-type="submit">{{ flag ? '添加' : '修改' }}</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script setup lang="ts">


import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { any } from 'vue-types';
const route = useRoute()
const router = useRouter()
const flag = route.path == '/productsCreate' ? true : false
let id: string | string[] | null = null

// let headers:string = 
// 上传图片
function getBase64(img: Blob, callback: (base64Url: string) => void) {
	const reader = new FileReader();
	reader.addEventListener('load', () => callback(reader.result as string));
	reader.readAsDataURL(img);
}
const layout = {
	labelCol: { span: 2 },
	wrapperCol: { span: 8 },
};

const validateMessages = {
	required: '${label} is required!',
	types: {
		email: '${label} is not a valid email!',
		number: '${label} is not a valid number!',
	},
	number: {
		range: '${label} must be between ${min} and ${max}',
	},
};

const formState:any = reactive({
	user: {
		name: "",
		pic: "public/uploads/37e611196aeba85534188b1e88cb5d3b1634778171359.jpeg",
		category: "",
		content: "",
		intro: "",
		id: "",
		route: '',
		status: true,
		recommend: false,
		updatedAt: new Date()
	},
	category1: []
	
});






// 组件销毁时，也及时销毁编辑器


// 上传部分

const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const handleChange = (info: any) => {
	if (info.file.status === 'uploading') {
		loading.value = true;
		return;
	}
	if (info.file.status === 'done') {
		// Get this url from response in real world.
		getBase64(info.file.originFileObj, (base64Url: string) => {
			imageUrl.value = base64Url;
			loading.value = false;
		});
	}
	if (info.file.status === 'error') {
		loading.value = false;
		message.error('upload error');
	}
};

const beforeUpload = (file: any) => {
	const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
	if (!isJpgOrPng) {
		message.error('You can only upload JPG file!');
	}
	const isLt2M = file.size / 1024 / 1024 < 2;
	if (!isLt2M) {
		message.error('Image must smaller than 2MB!');
	}
	return isJpgOrPng && isLt2M;
};

</script>

<style scoped>
.edit {
	padding-top: 30px;
}
</style>